<template>
  <div class="repo-link">
    <a href="https://gitee.com/rran99/001.git" target="_blank" data-cy="repo-link">仓库地址</a>
  </div>
  <div class="todo-container">
    <h1>待办事项列表</h1>
    <div class="input-wrapper">
      <input
        v-model="newTodo"
        @keyup.enter="addTodo"
        placeholder="添加新的待办事项"
        data-cy="todo-input"
      >
      <button @click="addTodo" data-cy="add-button">添加</button>
    </div>
    <ul data-cy="todo-list">
      <li
        v-for="(todo, index) in todos"
        :key="index"
        :class="{ completed: todo.done, editing: todo.isEditing }"
        :data-cy="`todo-item-${index}`"
      >
        <div class="todo-content">
          <input
            type="checkbox"
            v-model="todo.done"
            :data-cy="`todo-checkbox-${index}`"
          >
          <span
            v-if="!todo.isEditing"
            @dblclick="startEditing(index)"
            :data-cy="`todo-text-${index}`"
          >
            {{ todo.text }}
          </span>
          <input
            v-else
            v-model="todo.text"
            @keyup.enter="stopEditing(index)"
            @blur="stopEditing(index)"
            :data-cy="`todo-edit-input-${index}`"
            :ref="`editInput-${index}`"
          >
        </div>
        <button
          @click="removeTodo(index)"
          :data-cy="`delete-button-${index}`"
        >
          删除
        </button>
      </li>
    </ul>
    <div class="actions" v-if="todos.length > 0">
      <button @click="clearAllTodos" data-cy="clear-all-button">删除全部</button>
      <span class="todo-count" data-cy="todo-count">
        总计: {{ todos.length }} | 已完成: {{ completedCount }} | 未完成: {{ remainingCount }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue';

interface Todo {
  text: string;
  done: boolean;
  isEditing: boolean;
}

const todos = ref<Todo[]>([]);
const newTodo = ref('');

// 计算属性
const completedCount = computed(() => todos.value.filter(todo => todo.done).length);
const remainingCount = computed(() => todos.value.filter(todo => !todo.done).length);

const addTodo = () => {
  if (newTodo.value.trim()) {
    todos.value.push({ text: newTodo.value, done: false, isEditing: false });
    newTodo.value = '';
  }
};

const removeTodo = (index: number) => {
  todos.value.splice(index, 1);
};

const startEditing = async (index: number) => {
  todos.value[index].isEditing = true;
  await nextTick();
  const input = document.querySelector(`[data-cy="todo-edit-input-${index}"]`) as HTMLInputElement;
  if (input) {
    input.focus();
  }
};

const stopEditing = (index: number) => {
  todos.value[index].isEditing = false;
};

const clearAllTodos = () => {
  todos.value = [];
};
</script>

<style scoped>
.repo-link {
  text-align: center;
  padding: 20px;
}

.repo-link a {
  color: #007BFF;
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

.repo-link a:hover {
  color: #0056b3;
}

.todo-container {
  max-width: 800px;
  margin: 50px auto;
  padding: 30px;
  background-color: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
  font-size: 2.2rem;
}

.input-wrapper {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.input-wrapper input {
  flex: 1;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1.1rem;
}

.input-wrapper button {
  padding: 15px 30px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 1.1rem;
}

.input-wrapper button:hover {
  background-color: #0056b3;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}

.todo-content {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-grow: 1;
}

li.completed span {
  text-decoration: line-through;
  color: #999;
}

li.editing span {
  display: none;
}

li.editing input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

li button {
  padding: 8px 15px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 1rem;
  flex-shrink: 0;
}

li button:hover {
  background-color: #c82333;
}

.todo-content span {
  color: #007BFF;
}

.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.actions button {
  padding: 10px 20px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 1rem;
}

.actions button:hover {
  background-color: #c82333;
}

.todo-count {
  font-size: 14px;
  color: #666;
}
</style>
